<script setup>
  import { ref, onMounted, onBeforeUnmount } from "vue";
  import dayjs from "dayjs";
  import Left from '@/views/Left/index.vue'
  import Center from '@/views/Center/index.vue'
  import Right from '@/views/Right/index.vue'

  /* 显示时间功能 start */
  // 数据如果用户界面需要使用，需要定义成响应式数据
  const nowTime = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
  // 数据如果用户界面不需要使用，就定义成普通数据即可
  let timer = null;

  onMounted(() => {
    timer = setInterval(() => {
      nowTime.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
    }, 1000);
  });

  onBeforeUnmount(() => {
    clearInterval(timer);
    window.removeEventListener('resize')
  });
  /* 显示时间功能 end */

  const scale = ref(1)

  onMounted(() => {
    resize()
    // 监视容器大小变化
    window.addEventListener('resize', resize)
  })

  const resize = () => {
    // 设计稿的宽高
    const draftWidth = 1366;
    const draftHeight = 635;
    // 当前设备的宽高
    const width = document.documentElement.clientWidth
    const height = document.documentElement.clientHeight
    if (width/height > draftWidth/draftHeight) {
      scale.value = height / draftHeight
    } else {
      scale.value = width / draftWidth
    }
  }


</script>

<template>
  <div class="dashboard" :style="{transform: `scale(${scale})`}">
    <div class="header">
      <h1 class="title">数据大屏实时展示</h1>
      <span class="time">当前时间: {{ nowTime }}</span>
    </div>
    <div class="content">
      <div class="left">
        <Left/>
      </div>
      <div class="center">
        <Center/>
      </div>
      <div class="right">
        <Right />
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: "App",
  };
</script>

<style scoped lang="scss">
  .dashboard {
    .header {
      height: 60px;
      background-image: url("./assets/head_bg.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .title {
        font-size: 22px;
        color: #fff;
      }
      .time {
        position: absolute;
        right: 20px;
        top: 0;
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        color: $text-color;
      }
    }

    .content {
      height: calc(100% - 60px);
      display: flex;
      padding: 8px;
      .left,.right {
        width: 340px;
        height: 100%;
      }
      .center {
        width: 650px;
        height: 546px;
        margin: 0 10px;
        // background: #ccc;
      }
    }
  }
</style>
